<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
    <div id="app">
        {{message}}
    </div>
    <p><button onclick="destroy()">卸载</button></p>
    <p><button onclick="tick()">更新</button></p>
    <script>
        var jspang = Vue.extend({
            template:`<p>{{message}}</p>`,
            data: function(){
                return {
                    message: 'hello'
                }
            }
        })
        var vm = new jspang().$mount("#app");
        function destroy(){
            vm.$destroy();
        }
        function tick(){
            vm.message = 'update message info';
            vm.$nextTick(function(){
                console.log('message更新完后被调用');
            })
        }
    </script>
</body>
</html>